Coco - Responsive Bootstrap Template Documentation

Skip to main content

# Documentation

Excellent template with game changer features!

## Overview

Coco template is created to work smoothly on all devices. It is a backend interface for your application which you can use on all your devices and even create application that your users can use your application via iPhone, iPad, Android or any other devices. It is not just a template that you can use with your software but also have applications that you can use inside your application like live weather widget which gets weather information from Yahoo according to your location, Todo list that you can actually use on your daily activities or calculator that you can use when you are doing your accounting.

It has some game changer features that will make your application much useful than ever. Now lets take a look at the features list.

## Mockups & Screenshots

## Features

- Built with Bootstrap 3.0.2
- Html5 Markup & CSS3
- Fully Responsive & Interactive for many devices
- Flat user interface
- Portable & Customizable interface
- Nicely organized application structure
- Multilevel menu
- Movable widgets
- Portable widgets
- Real working applications that can be used without any extra
- Built with Less
- Latest jQuery v1.10.2
- jQuery Slimscroll
- jQuery Sparklines
- Morris Chart
- Chartjs
- jQuery Sortable
- Flot Charts
- jQuery Easy Pie Chart
- Javascript form validations
- Date, date range & color Picker(Bootstrap Date, range & color Picker)
- CKEditor
- Integrated Full Calendar(jQuery Full Calendar)
- Nicely styled notifications
- Form Component
- Multi Select
- Timepicker
- WYSIWYG Editors
- Form wizard (jquery stepy)
- Form Validation
- jQuery File Upload
- Inline Editor
- Dropzone file upload
- Google maps
- Nestable
- jQuery Knob
- Slider (jQuery Slider)
- Dynamic Tables
- Responsive Table
- Font Icons(Font Awesome 4.2.0), Glyphicons and
- Custom Radiobutton, Checkbox
- Google font - OpenSans
- Detailed Documentation

### Very well organized code

> Template is coded with a very clean and understandable coding even for non developers.

If you study Twitter bootstrap documentation and get used to it's structure, it will be a baby toy for you to set up your application using this template.

### Portable & actually usable widgets

> Coco template has widgets that actually works as you need!

In template, you can make your widgets portable. Not just from one grid to another. You can actually carry widgets anywhere you want in the template or resize it to the size you need. We thought it would be cool if you can for example move calculator to up, next to daily orders table and make calculations without the need to use any other application. This will work on your tablets as well which is normally a problem. When you are viewing a page, you can open a calculator aside and do your calculation when you are using your PC or MAC. However most of the tablets or phones are not able to run a second application when you are browsing a page.

Don't wait any more and try it on your own device like it is on the screenshot aside. Make it portable and move it up. All operations are touch friendly!

### Shaped up for your needs

> Just need to focus on one application at a time? Have a look at the screenshots below...

All you need is to make them fullscreen and widget will cover up the size of the inner page. It can be a landscape or portrait. It doesn't mattter. It wil adjust!

## Structure

### Folder/file Structure

    Root/(Main HTML files)
        └── assets/
           │
           ├── css/
           │   ├── style.css(compiled less file)
           │   ├── style-responsive.css
           │   └── style.less
           │
           ├── img/(Main template images)
           │
           ├── js/
           │   ├── apps/(Common application js files)
           │   ├── pages/(Page specific javascript files)
           │   └── init.js(Main template javascript file)
           │
           └── libs/(3rd party libraries)
               ├── bootstrap
               │    ├── css/
               │    │   ├── bootstrap.css
               │    │   ├── bootstrap.min.css
               │    │   ├── bootstrap-theme.css
               │    │   └── bootstrap-theme.min.css
               │    ├── js/
               │    │   ├── bootstrap.js
               │    │   └── bootstrap.min.js
               │    └── fonts/
               │        ├── glyphicons-halflings-regular.eot
               │        ├── glyphicons-halflings-regular.svg
               │        ├── glyphicons-halflings-regular.ttf
               │        └── glyphicons-halflings-regular.woff
               ├── jquery
               ├── jqueryui
               ├── ckeditor
               └── some_other_package

### HTML Structure

#### General Layout

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">

    	<title>Page Title</title>

    	<!-- Css Files -->

    </head>

    <body>
    	<!-- Begin page -->

    	<div id="wrapper">

    		<!-- Top Bar Start -->
    		<div class="topbar"></div>
    		<!-- Top Bar End -->

    		<!-- Left Sidebar Start -->
    		<div class="left side-menu"></div>
    		<!-- Left Sidebar End -->

    		<!-- Right Sidebar Start -->
    		<div class="right side-menu"></div>
    		<!-- Right Sidebar End --><!-- Start right content -->

    		<div class="content-page">
    			<!-- ============================================================== -->
    			<!-- Start Content here -->
    			<!-- ============================================================== -->

    			<div class="content">

    				<!-- Page Heading Start -->
    				<div class="page-heading">
    				</div>
    				<!-- Page Heading End-->

    				<!-- PAGE CONTENT -->

    			</div>
    		</div>
    	</div>

    	<!-- Footer Start -->
    	<footer>
    	</footer>
    	<!-- Footer End -->

    	<!-- ============================================================== -->
    	<!-- End content here -->
    	<!-- ============================================================== -->

    	<!-- Javascript files -->
    </body>
    </html>

#### Main Content

    <!-- Start right content -->
    <div class="content-page">
    	<!-- ============================================================== -->
    	<!-- Start Content here -->
    	<!-- ============================================================== -->
        <div class="content">
        	<!-- Page Heading Start -->
    		<div class="page-heading">
        		<h1><i class='fa fa-file'></i> Blank</h1>
        		<h3>Blank Page</h3>
            </div>
        	<!-- Page Heading End-->

            <div class="row">
    			<div class="col-md-12 portlets">
                    <!-- Page Content-->
    			</div>
    		</div>

    	<!-- Footer Start -->
        <footer>
            Huban Creative &copy; 2014
            <div class="footer-links pull-right">
            	<!-- Footer Links-->
            </div>
        </footer>
        <!-- Footer End -->
        </div>
    	<!-- ============================================================== -->
    	<!-- End content here -->
    	<!-- ============================================================== -->

    </div>
    <!-- End right content -->

#### Topbar

    <!-- Top Bar Start -->

    <div class="topbar">
    	<div class="topbar-left">
    		<div class="logo">
    			<h1><a href="#"><img alt="Logo" src="assets/img/logo.png"></a></h1>
    		</div><button class="button-menu-mobile open-left fa fa-bars" style="font-style: italic"></button>
    	</div><!-- Button mobile view to collapse sidebar menu -->

    	<div class="navbar navbar-default">
    		<div class="container">
    			<div class="navbar-collapse2">
    				<ul class="nav navbar-nav">
    					<li class="dropdown">
    						<a class="icon-th" href="#" style="font-style: italic"></a>
    					</li>
    				</ul>

    				<ul class="nav navbar-nav navbar-right top-navbar">
    					<li class="dropdown iconify hide-phone">
    						<a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-globe"></i><span class="label label-danger absolute">4</span></a>

    						<ul class="dropdown-menu dropdown-message">
    							<li class="dropdown-header notif-header">
    								<i class="icon-bell-2"></i> New Notifications<a class="pull-right fa fa-cog" href="#" style="font-style: italic"></a>
    							</li>

    							<li class="unread">
    								<a href="#">
    								<p><strong>John Doe</strong> Uploaded a photo <strong>&#34;DSC000254.jpg&#34;</strong><br>
    								<i>2 minutes ago</i></p></a>
    							</li>

    							<li class="unread">
    								<a href="#">
    								<p><strong>John Doe</strong> Created an photo album <strong>&#34;Fappening&#34;</strong><br>
    								<i>8 minutes ago</i></p></a>
    							</li>

    							<li>
    								<a href="#">
    								<p><strong>John Malkovich</strong> Added 3 products<br>
    								<i>3 hours ago</i></p></a>
    							</li>

    							<li>
    								<a href="#">
    								<p><strong>Sonata Arctica</strong> Send you a message <strong>&#34;Lorem ipsum dolor...&#34;</strong><br>
    								<i>12 hours ago</i></p></a>
    							</li>

    							<li>
    								<a href="#">
    								<p><strong>Johnny Depp</strong> Updated his avatar<br>
    								<i>Yesterday</i></p></a>
    							</li>

    							<li class="dropdown-footer">
    								<div class="btn-group btn-group-justified">
    									<div class="btn-group">
    										<a class="btn btn-sm btn-primary" href="#"><i class="icon-ccw-1"></i> Refresh</a>
    									</div>

    									<div class="btn-group">
    										<a class="btn btn-sm btn-danger" href="#"><i class="icon-trash-3"></i> Clear All</a>
    									</div>

    									<div class="btn-group">
    										<a class="btn btn-sm btn-success" href="#">See All <i class="icon-right-open-2"></i></a>
    									</div>
    								</div>
    							</li>
    						</ul>
    					</li>

    					<li class="dropdown iconify hide-phone">
    						<a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-envelope"></i><span class="label label-danger absolute">3</span></a>

    						<ul class="dropdown-menu dropdown-message">
    							<li class="dropdown-header notif-header"><i class="icon-mail-2"></i> New Messages</li>

    							<li class="unread">
    								<a class="clearfix" href="#"><img alt="Avatar" class="xs-avatar ava-dropdown" src="images/users/chat/2.jpg"> <strong>John Doe</strong><i class="pull-right msg-time">5 minutes ago</i><br>

    								<p>Duis autem vel eum iriure dolor in hendrerit ...</p></a>
    							</li>

    							<li class="unread">
    								<a class="clearfix" href="#"><img alt="Avatar" class="xs-avatar ava-dropdown" src="images/users/chat/1.jpg"> <strong>Sandra Kraken</strong><i class="pull-right msg-time">22 minutes ago</i><br>

    								<p>Duis autem vel eum iriure dolor in hendrerit ...</p></a>
    							</li>

    							<li>
    								<a class="clearfix" href="#"><img alt="Avatar" class="xs-avatar ava-dropdown" src="images/users/chat/3.jpg"> <strong>Zoey Lombardo</strong><i class="pull-right msg-time">41 minutes ago</i><br>

    								<p>Duis autem vel eum iriure dolor in hendrerit ...</p></a>
    							</li>

    							<li class="dropdown-footer">
    								<div class="">
    									<a class="btn btn-sm btn-block btn-primary" href="#"><i class="fa fa-share"></i> See all messages</a>
    								</div>
    							</li>
    						</ul>
    					</li>

    					<li class="dropdown topbar-profile">
    						<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="rounded-image topbar-profile-image"><img src="images/users/user-35.jpg"></span> Jane <strong>Doe</strong> <i class="fa fa-caret-down"></i></a>

    						<ul class="dropdown-menu">
    							<li>
    								<a href="#">My Profile</a>
    							</li>

    							<li>
    								<a href="#">Change Password</a>
    							</li>

    							<li>
    								<a href="#">Account Setting</a>
    							</li>

    							<li class="divider"></li>

    							<li>
    								<a href="#"><i class="icon-help-2"></i> Help</a>
    							</li>

    							<li>
    								<a href="lockscreen.html"><i class="icon-lock-1"></i> Lock me</a>
    							</li>

    							<li>
    								<a class="md-trigger" data-modal="logout-modal"><i class="icon-logout-1"></i> Logout</a>
    							</li>
    						</ul>
    					</li>

    					<li class="right-opener">
    						<a class="open-right" href="javascript:;"><i class="fa fa-angle-double-left"></i><i class="fa fa-angle-double-right"></i></a>
    					</li>
    				</ul>
    			</div><!--/.nav-collapse -->
    		</div>
    	</div>
    </div><!-- Top Bar End -->

#### Main Menu

    <div class="left side-menu">
    	<div class="sidebar-inner slimscrollleft">
    		<!-- Search form -->

    		<form class="navbar-form">
    			<div class="form-group">
    				<input class="form-control" placeholder="Search" type="text"> <button class="btn search-button fa fa-search" style="font-style: italic" type="submit"></button>
    			</div>
    		</form>

    		<div class="clearfix"></div><!--- Profile -->

    		<div class="profile-info">
    			<div class="col-xs-4">
    				<a class="rounded-image profile-image" href="profile.html"><img src="images/users/user-100.jpg"></a>
    			</div>

    			<div class="col-xs-8">
    				<div class="profile-text">
    					Welcome <b>Jane</b>
    				</div>

    				<div class="profile-buttons">
    					<a class="fa fa-envelope-o pulse" href="javascript:;" style="font-style: italic"></a> <a class="open-right fa fa-comments" href="#connect" style="font-style: italic"></a> <a class="fa fa-power-off text-red-1" href="javascript:;" style="font-style: italic" title="Sign Out"></a>
    				</div>
    			</div>
    		</div><!--- Divider -->

    		<div class="clearfix"></div>
    		<hr class="divider">

    		<div class="clearfix"></div><!--- Divider -->

    		<div id="sidebar-menu">
    			<ul>
    				<li>
    					<a href='index.html'><i class='icon-home-3'></i><span>Dashboard</span></a>
    				</li>

    				<li class='has_sub'>
    					<a href='#'><i class='icon-feather'></i><span>UI Elements</span> <span class="pull-right fa fa-angle-down" style="font-style: italic"></span></a>

    					<ul>
    						<li>
    							<a href='alerts.html'><span>Alerts</span></a>
    						</li>

    						<li>
    							<a class='active' href='buttons.html'><span>Buttons</span></a>
    						</li>

    						<li>
    							<a href='calendar.html'><span>Calendar</span></a>
    						</li>

    						<li>
    							<a href='grid.html'><span>Grid</span></a>
    						</li>

    						<li>
    							<a href='icons.html'><span>Icons</span></a>
    						</li>

    						<li>
    							<a href='modals.html'><span>Modals</span></a>
    						</li>

    						<li>
    							<a href='nested-list.html'><span>Nested List</span></a>
    						</li>

    						<li>
    							<a href='notifications.html'><span>Notifications</span></a>
    						</li>

    						<li>
    							<a href='portlets.html'><span>Portlets</span></a>
    						</li>

    						<li>
    							<a href='progress-bars.html'><span>Progress Bars</span></a>
    						</li>

    						<li>
    							<a href='tabs-accordions.html'><span>Tabs & Accordions</span></a>
    						</li>

    						<li>
    							<a href='typography.html'><span>Typography</span></a>
    						</li>
    					</ul>
    				</li>

    				<li class='has_sub'>
    					<a href='#'><i class='icon-pencil-3'></i><span>Forms</span> <span class="pull-right fa fa-angle-down" style="font-style: italic"></span></a>

    					<ul>
    						<li>
    							<a href='forms.html'><span>Form Elements</span></a>
    						</li>

    						<li>
    							<a href='advanced-forms.html'><span>Advanced Forms</span></a>
    						</li>

    						<li>
    							<a href='form-wizard.html'><span>Form Wizard</span></a>
    						</li>

    						<li>
    							<a href='form-validation.html'><span>Form Validation</span></a>
    						</li>

    						<li>
    							<a href='form-uploads.html'><span>File Uploads</span></a>
    						</li>
    					</ul>
    				</li>

    				<li class='has_sub'>
    					<a href='#'><i class='fa fa-table'></i><span>Tables</span> <span class="pull-right fa fa-angle-down" style="font-style: italic"></span></a>

    					<ul>
    						<li>
    							<a href='tables.html'><span>Basic Tables</span></a>
    						</li>

    						<li>
    							<a href='datatables.html'><span>Datatables</span></a>
    						</li>
    					</ul>
    				</li>

    				<li class='has_sub'>
    					<a href='#'><i class='fa fa-map-marker'></i><span>Maps</span> <span class="pull-right fa fa-angle-down" style="font-style: italic"></span></a>

    					<ul>
    						<li>
    							<a href='google-maps.html'><span>Google Maps</span></a>
    						</li>

    						<li>
    							<a href='vector-maps.html'><span>Vector Maps</span></a>
    						</li>
    					</ul>
    				</li>

    				<li class='has_sub'>
    					<a href='#'><i class='fa fa-envelope'></i><span>Email</span> <span class="pull-right fa fa-angle-down" style="font-style: italic"></span></a>

    					<ul>
    						<li>
    							<a href='inbox.html'><span>Inbox</span></a>
    						</li>

    						<li>
    							<a href='read-message.html'><span>View Email</span></a>
    						</li>

    						<li>
    							<a href='new-message.html'><span>New Message</span></a>
    						</li>
    					</ul>
    				</li>

    				<li class='has_sub'>
    					<a href='#'><i class='icon-chart-line'></i><span>Charts</span> <span class="pull-right fa fa-angle-down" style="font-style: italic"></span></a>

    					<ul>
    						<li>
    							<a href='sparkline-charts.html'><span>Sparkline Charts</span></a>
    						</li>

    						<li>
    							<a href='morris-charts.html'><span>Morris Charts</span></a>
    						</li>

    						<li>
    							<a href='rickshaw-charts.html'><span>Rickshaw Charts</span></a>
    						</li>

    						<li>
    							<a href='other-charts.html'><span>Other Charts</span></a>
    						</li>
    					</ul>
    				</li>

    				<li class='has_sub'>
    					<a href='#'><i class='icon-megaphone'></i><span>Extras</span> <span class="pull-right fa fa-angle-down" style="font-style: italic"></span></a>

    					<ul>
    						<li>
    							<a href='blank.html'><span>Blank Page</span></a>
    						</li>

    						<li>
    							<a href='login.html'><span>Login</span></a>
    						</li>

    						<li>
    							<a href='register.html'><span>Register</span></a>
    						</li>

    						<li>
    							<a href='lockscreen.html'><span>Lock Screen</span></a>
    						</li>

    						<li>
    							<a href='404.html'><span>404 Error</span></a>
    						</li>

    						<li>
    							<a href='500.html'><span>500 Error</span></a>
    						</li>

    						<li>
    							<a href='profile.html'><span>User Profile</span></a>
    						</li>

    						<li>
    							<a href='invoice.html'><span>Invoice</span></a>
    						</li>

    						<li>
    							<a href='gallery.html'><span>Gallery</span></a>
    						</li>

    						<li>
    							<a href='maintenance.html'><span>Maintenance</span></a>
    						</li>

    						<li class='has_sub'>
    							<a href='#'><span>3 Level menu</span> <span class="pull-right fa fa-angle-down" style="font-style: italic"></span></a>

    							<ul>
    								<li>
    									<a href='#'><span>Sub Item</span></a>
    								</li>
    							</ul>
    						</li>

    						<li class='has_sub'>
    							<a href='#'><span>4 Level Menu</span> <span class="pull-right fa fa-angle-down" style="font-style: italic"></span></a>

    							<ul>
    								<li class='has_sub'>
    									<a href='#'><span>Sub Item - level 3</span> <span class="pull-right fa fa-angle-down" style="font-style: italic"></span></a>

    									<ul>
    										<li>
    											<a href='#'><span>Sub Item - level 4</span></a>
    										</li>
    									</ul>
    								</li>
    							</ul>
    						</li>

    						<li class='has_sub'>
    							<a href='#'><span>Submenu with icons</span> <span class="pull-right fa fa-angle-down" style="font-style: italic"></span></a>

    							<ul>
    								<li>
    									<a href='#'><i class='fa fa-camera'></i><span>Item with icon</span></a>
    								</li>

    								<li>
    									<a href='#'><i class='entypo entypo-users'></i><span>Another Item</span></a>
    								</li>
    							</ul>
    						</li>
    					</ul>
    				</li>
    			</ul>

    			<div class="clearfix"></div>
    		</div>

    		<div class="clearfix"></div>

    		<div class="portlets">
    			<div class="widget transparent nomargin" id="chat_groups">
    				<h2>Chat Groups</h2>

    				<div class="widget-content">
    					<ul class="list-unstyled">
    						<li>
    							<a href="javascript:;"><i class="fa fa-circle-o text-red-1"></i> Colleagues</a>
    						</li>

    						<li>
    							<a href="javascript:;"><i class="fa fa-circle-o text-blue-1"></i> Family</a>
    						</li>

    						<li>
    							<a href="javascript:;"><i class="fa fa-circle-o text-green-1"></i> Friends</a>
    						</li>
    					</ul>
    				</div>
    			</div>

    			<div class="widget transparent nomargin" id="recent_tickets">
    				<h2>Recent Tickets</h2>

    				<div class="widget-content">
    					<ul class="list-unstyled">
    						<li>
    							<a href="javascript:;">My wordpress blog is broken <span>I was trying to save my page and...</span></a>
    						</li>

    						<li>
    							<a href="javascript:;">Server down, need help!<span>My server is not responding for the last...</span></a>
    						</li>
    					</ul>
    				</div>
    			</div>
    		</div>

    		<div class="clearfix"></div><br>
    		<br>
    		<br>
    	</div>

    	<div class="left-footer">
    		<div class="progress progress-xs">
    			<div class="progress-bar bg-green-1" style="width: 80%">
    				<span class="progress-precentage">80%</span>
    			</div><a class="btn btn-default md-trigger fa fa-inbox" data-modal="task-progress" data-toggle="tooltip" style="font-style: italic" title="See task progress"></a>
    		</div>
    	</div>
    </div>
    <!-- Left Sidebar End -->

#### Right Menu

    <div class="right side-menu">
    	<ul class="nav nav-tabs nav-justified" id="right-tabs">
    		<li class="active">
    			<a class="icon-rss-2" data-toggle="tab" href="#feed" style="font-style: italic" title="Live Feed"></a>
    		</li>

    		<li>
    			<a class="icon-chat" data-toggle="tab" href="#connect" style="font-style: italic" title="Chat"></a>
    		</li>

    		<li>
    			<a class="icon-wrench" data-toggle="tab" href="#settings" style="font-style: italic" title="Preferences"></a>
    		</li>
    	</ul>

    	<div class="clearfix"></div>

    	<div class="tab-content">
    		<div class="tab-pane active" id="feed">
    			<div class="tab-inner slimscroller">
    				<div class="search-right">
    					<input class="form-control" placeholder="Search" type="text">
    				</div>

    				<div class="right-toolbar">
    					<a class="pull-right" href="javascript:;">Settings <i class="icon-cog"></i></a>

    					<div class="clearfix"></div>
    				</div>

    				<div class="clearfix"></div>

    				<div class="panel-group" id="collapse">
    					<div class="panel panel-default">
    						<div class="panel-heading bg-orange-1">
    							<h4 class="panel-title"><a data-parent="#accordion" data-toggle="collapse" href="#rnotifications"><i class="icon-bell-2"></i> Notifications <span class="label bg-darkblue-1 pull-right">4</span></a></h4>
    						</div>

    						<div class="panel-collapse collapse in" id="rnotifications">
    							<div class="panel-body">
    								<ul class="list-unstyled" id="notification-list">
    									<li>
    										<a href="javascript:;"><span class="icon-wrapper icon-video" style="font-style: italic"></span> 1 Video Uploaded <span class="muted">12 minutes ago</span></a>
    									</li>

    									<li>
    										<a href="javascript:;"><span class="icon-wrapper icon-users-1" style="font-style: italic"></span> 3 Users signed up <span class="muted">16 minutes ago</span></a>
    									</li>

    									<li>
    										<a href="javascript:;"><span class="icon-wrapper icon-picture-1" style="font-style: italic"></span> 1 Video Uploaded <span class="muted">12 minutes ago</span></a>
    									</li>

    									<li>
    										<a href="javascript:;"><span class="icon-wrapper icon-hourglass-1" style="font-style: italic"></span> Deadline for 1 project <span class="muted">12 minutes ago</span></a>
    									</li>
    								</ul><a class="btn btn-block btn-sm btn-warning">See all notifications</a>
    							</div>
    						</div>
    					</div>

    					<div class="panel panel-default">
    						<div class="panel-heading bg-green-3">
    							<h4 class="panel-title"><a data-parent="#accordion" data-toggle="collapse" href="#remails"><i class="icon-mail"></i> E-mails <span class="label bg-darkblue-1 pull-right">3</span></a></h4>
    						</div>

    						<div class="panel-collapse collapse in" id="remails">
    							<div class="panel-body">
    								<ul class="list-unstyled" id="inbox-list">
    									<li>
    										<a href="javascript:;"><span class="sender"><i class="icon-star text-yellow-2"></i> Kim Wilde</span> <span class="datetime">6 mins ago</span> <span class="title">You keep me hangin on</span> <span class="content">Where are you? I am waiting for 3 hours in the restaurant. I ate 3 hamburgers.</span></a>
    									</li>

    									<li>
    										<a href="javascript:;"><span class="sender">Tyler Durden</span> <span class="datetime">13 hours ago</span> <span class="title">Buy some soap from market before</span> <span class="content">We are crowded here. We need some more soap at home. Buy some before you come home.</span></a>
    									</li>

    									<li>
    										<a href="javascript:;"><span class="sender">John Bonomo</span> <span class="datetime">Yesterday</span> <span class="title">Late delivery</span> <span class="content">Hello, I ordered 15 box of viagra for a friend of mine but he still hasn't receive them.</span></a>
    									</li>
    								</ul><a class="btn btn-block btn-sm btn-primary">Go to inbox</a>
    							</div>
    						</div>
    					</div>

    					<div class="panel panel-default">
    						<div class="panel-heading bg-blue-1">
    							<h4 class="panel-title"><a data-parent="#accordion" data-toggle="collapse" href="#rupdates"><i class="icon-signal-2"></i> Updates <span class="label bg-darkblue-1 pull-right">5</span></a></h4>
    						</div>

    						<div class="panel-collapse collapse in" id="rupdates">
    							<div class="panel-body">
    								<ul class="list-unstyled" id="updates-list">
    									<li>
    										<a href="javascript:;"><span class="icon-wrapper bg-green-1 icon-comment-1" style="font-style: italic"></span> <b>David Guetta</b> came online <abbr title="15 seconds ago">just now</abbr>.</a>
    									</li>

    									<li>
    										<a href="javascript:;"><span class="icon-wrapper bg-red-1 icon-user-3" style="font-style: italic"></span> <b>Katy Perry</b> updated her profile <abbr title="4 mins ago">4 mins ago</abbr>.</a>
    									</li>

    									<li>
    										<a href="javascript:;"><span class="icon-wrapper bg-blue-1 icon-twitter-2" style="font-style: italic"></span> <b>4 tweets posted</b> with cronjob <abbr title="22 mins ago">22 mins ago</abbr>.</a>
    									</li>

    									<li>
    										<a href="javascript:;"><span class="icon-wrapper bg-orange-3 icon-water" style="font-style: italic"></span> <b>Adele</b> set fire to the rain <abbr title="43 mins ago">43 mins ago</abbr>.</a>
    									</li>

    									<li>
    										<a href="javascript:;"><span class="icon-wrapper bg-pink-2 icon-heart-broken" style="font-style: italic"></span> <b>Taylor Swift</b> learned that you are trouble <abbr title="3 hours ago">3 days ago</abbr>.</a>
    									</li>
    								</ul>
    							</div>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>

    		<div class="tab-pane" id="connect">
    			<div class="tab-inner slimscroller">
    				<div class="search-right">
    					<input class="form-control" placeholder="Search" type="text">
    				</div>

    				<div class="panel-group" id="collapse">
    					<div class="panel panel-default" id="chat-panel">
    						<div class="panel-heading bg-darkblue-2">
    							<h4 class="panel-title"><a data-toggle="collapse" href="#chat-coll"><i class="icon-briefcase-1"></i> Colleagues <span class="label bg-darkblue-1 pull-right">14</span></a></h4>
    						</div>

    						<div class="panel-collapse collapse in" id="chat-coll">
    							<div class="panel-body">
    								<ul class="list-unstyled" id="chat-list">
    									<li>
    										<a class="online" href="javascript:;"><span class="chat-user-avatar"><img src="images/users/chat/1.jpg"></span> <span class="chat-user-name">Dorothy Simons</span><span class="chat-user-msg">I wish I was a bird in the sky</span></a>
    									</li>

    									<li>
    										<a class="online" href="javascript:;"><span class="chat-user-avatar"><img src="images/users/chat/2.jpg"></span> <span class="chat-user-name">John Malkovich</span><span class="chat-user-msg">You were the traitor</span></a>
    									</li>

    									<li>
    										<a class="online" href="javascript:;"><span class="chat-user-avatar"><img src="images/users/chat/3.jpg"></span> <span class="chat-user-name">Jessica Simons</span><span class="chat-user-msg">Where is my mind</span></a>
    									</li>

    									<li>
    										<a class="away" href="javascript:;"><span class="chat-user-avatar"><img src="images/users/chat/4.jpg"></span> <span class="chat-user-name">Jack Stallman</span><span class="chat-user-msg">Away since 13:32</span></a>
    									</li>

    									<li>
    										<a class="offline" href="javascript:;"><span class="chat-user-avatar"><img src="images/users/chat/5.jpg"></span> <span class="chat-user-name">Neil Armstrong</span><span class="chat-user-msg" title="I am flying to the moon and back">I am flying to the moon and back</span></a>
    									</li>

    									<li>
    										<a class="offline" href="javascript:;"><span class="chat-user-avatar"><img src="images/users/chat/6.jpg"></span> <span class="chat-user-name">Hollywood Studios</span><span class="chat-user-msg">Yes he definitely is!</span></a>
    									</li>
    								</ul>
    							</div>
    						</div>
    					</div>

    					<div class="panel panel-default" id="chat-panel">
    						<div class="panel-heading bg-darkblue-2">
    							<h4 class="panel-title"><a data-parent="#accordion" data-toggle="collapse" href="#collapseTwo"><i class="icon-heart-3"></i> Friends <span class="label bg-darkblue-1 pull-right">3</span></a></h4>
    						</div>

    						<div class="panel-collapse collapse in" id="collapseTwo">
    							<div class="panel-body">
    								<ul class="list-unstyled" id="chat-list">
    									<li>
    										<a class="online" href="javascript:;"><span class="chat-user-avatar"><img src="images/users/chat/1.jpg"></span> <span class="chat-user-name">Dorothy Simons</span><span class="chat-user-msg">I wish I was a bird in the sky</span></a>
    									</li>

    									<li>
    										<a class="online" href="javascript:;"><span class="chat-user-avatar"><img src="images/users/chat/2.jpg"></span> <span class="chat-user-name">John Malkovich</span><span class="chat-user-msg">You were the traitor</span></a>
    									</li>

    									<li>
    										<a class="online" href="javascript:;"><span class="chat-user-avatar"><img src="images/users/chat/3.jpg"></span> <span class="chat-user-name">Jessica Simons</span><span class="chat-user-msg" title="Eminem - The Monster ft. Rihanna"><i class="icon-play"></i> Eminem - The Monster ft. Rihanna</span></a>
    									</li>

    									<li>
    										<a class="away" href="javascript:;"><span class="chat-user-avatar"><img src="images/users/chat/4.jpg"></span> <span class="chat-user-name">Jack Stallman</span><span class="chat-user-msg">Away since 13:32</span></a>
    									</li>

    									<li>
    										<a class="offline" href="javascript:;"><span class="chat-user-avatar"><img src="images/users/chat/5.jpg"></span> <span class="chat-user-name">Neil Armstrong</span><span class="chat-user-msg" title="I am flying to the moon and back">I am flying to the moon and back</span></a>
    									</li>

    									<li>
    										<a class="offline" href="javascript:;"><span class="chat-user-avatar"><img src="images/users/chat/6.jpg"></span> <span class="chat-user-name">Hollywood Studios</span><span class="chat-user-msg">Yes he definitely is!</span></a>
    									</li>
    								</ul>
    							</div>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>

    		<div class="tab-pane" id="settings">
    			<div class="tab-inner slimscroller">
    				<div class="col-sm-12">
    					<h3>Preferences</h3>

    					<div class="row">
    						<div class="col-xs-8">
    							Live data updates
    						</div>

    						<div class="col-xs-4">
    							<input checked class="ios-switch ios-switch-success ios-switch-sm" type="checkbox">
    						</div>
    					</div>

    					<div class="row">
    						<div class="col-xs-8">
    							Live feeds
    						</div>

    						<div class="col-xs-4">
    							<input checked class="ios-switch ios-switch-success ios-switch-sm" type="checkbox">
    						</div>
    					</div>

    					<div class="row">
    						<div class="col-xs-8">
    							Sync data to cloud
    						</div>

    						<div class="col-xs-4">
    							<input checked class="ios-switch ios-switch-success ios-switch-sm" type="checkbox">
    						</div>
    					</div>

    					<div class="row">
    						<div class="col-xs-8">
    							Keep activity record
    						</div>

    						<div class="col-xs-4">
    							<input checked class="ios-switch ios-switch-danger ios-switch-sm" type="checkbox">
    						</div>
    					</div>

    					<h4>Other Settings</h4>

    					<div class="row">
    						<div class="col-xs-12">
    							<label class="checkboxw"><input checked type="checkbox"> Autosave settings</label>
    						</div>
    					</div>

    					<div class="row">
    						<div class="col-xs-12">
    							<label class="checkboxw"><input type="checkbox"> Always online</label>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </div><!-- Right Sidebar End -->

### LESS Structure

Colors, sizes are dynamically defined in the template mostly. Simply by changing the variables, you can create a completely different scheme for your template and even change the size of your sidebars or main content!

    @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);

    @left_sidebar_width: 280px;
    @resized_left: 50px;
    @right_sidebar_width: @left_sidebar_width - @resized_left;
    @maincolor: #343838;
    @hovercolor: #68C39F;
    @topbar_color: #ffffff;
    @brand_color:#343838;
    @contentbg: #E4EAE6;
    @first_level_hover: lighten(@maincolor,10%);
    @second_level: darken(@maincolor,5%);

    /* COLORS */
    @transparent: rgba(0,0,0,0);
    @white-1: #ffffff;
    @red-1: #EB5055;
    @blue-1: #3C989E;
    @blue-2: #3498DB;
    @blue-3: #2980B9;
    @darkblue-1: #252932;
    @darkblue-2: #4A525F;
    @darkblue-3: #38464A;
    @lightblue-1: #ABB7B7;
    @lightblue-2: #7A868F;
    @orange-1: #E84C3D;
    @orange-2: #DE745E;
    @orange-3: #E27A3F;
    @green-1: #68C39F;
    @green-2: #9EC789;
    @green-3: #209C83;
    @pink-1: #F57A82;
    @pink-2: #F56F6C;
    @yellow-1: #F4CDA5;
    @yellow-2: #EAE696;

    /* COLORS END */

* To process less files you need less precompilers for your application. You can refer to documentation here(http://lesscss.org/usage/) to get more information.

### Javascript Structure

One of the most critical files in the template is the init.js file. It executes the main resizing functions, initiates extra plugins placed and sets up the main template. You can edit it and add/remove extra parts from it containing 3rd party functions but main functions should stay for system to operate properly.

    //WIDGET ACTIONS
    $(".widget-header .widget-close").on("click",function(){
      $item = $(this).parents(".widget:first");
      bootbox.confirm("Are you sure to remove this widget?", function(result) {
        if(result === true){
          $item.addClass("animated bounceOutUp");
            window.setTimeout(function () {
               $item.remove();
            }, 300);
        }
      });
    });

    $(document).on("click", ".widget-header .widget-toggle", function(event){
      event.preventDefault();
      $(this).toggleClass("closed").parents(".widget:first").find(".widget-content").slideToggle();
    });

### Less Mixins & Functions

#### LESS Mixins

    .border-radius(@radius: 3px) {
        -webkit-border-radius: @radius !important;
        -moz-border-radius: @radius !important;
        border-radius: @radius !important;
    }

    .box-shadow (@x: 0px, @y: 3px, @blur: 5px, @color: #333) {
      -webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @color);
      -moz-box-shadow: @x @y @blur rgba(0, 0, 0, @color);
      box-shadow: @x @y @blur rgba(0, 0, 0, @color);
    }

    .transition(@transition) {
      -webkit-transition: @transition;
         -moz-transition: @transition;
           -o-transition: @transition;
              transition: @transition;
    }

    .opacity(@opacity) {
      opacity: @opacity;
      @opacity-ie: @opacity * 100;
      filter: ~"alpha(opacity=@{opacity-ie})"; // IE8
    }

    .rotate(@degrees) {
      -webkit-transform: rotate(@degrees);
         -moz-transform: rotate(@degrees);
          -ms-transform: rotate(@degrees);
           -o-transform: rotate(@degrees);
              transform: rotate(@degrees);
    }

    .scale(@ratio) {
      -webkit-transform: scale(@ratio);
         -moz-transform: scale(@ratio);
          -ms-transform: scale(@ratio);
           -o-transform: scale(@ratio);
              transform: scale(@ratio);
    }

    .translate(@x, @y) {
      -webkit-transform: translate(@x, @y);
         -moz-transform: translate(@x, @y);
          -ms-transform: translate(@x, @y);
           -o-transform: translate(@x, @y);
              transform: translate(@x, @y);
    }

    .skew(@x, @y) {
      -webkit-transform: skew(@x, @y);
         -moz-transform: skew(@x, @y);
          -ms-transform: skewX(@x) skewY(@y);
           -o-transform: skew(@x, @y);
              transform: skew(@x, @y);
      -webkit-backface-visibility: hidden;
    }

    .translate3d(@x, @y, @z) {
      -webkit-transform: translate3d(@x, @y, @z);
         -moz-transform: translate3d(@x, @y, @z);
           -o-transform: translate3d(@x, @y, @z);
              transform: translate3d(@x, @y, @z);
    }

    .placeholder(@color: @input-color-placeholder) {
      &:-moz-placeholder            { color: @color; } // Firefox 4-18
      &::-moz-placeholder           { color: @color; } // Firefox 19+
      &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
      &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
    }

#### LESS Functions

    .set-text-color (@color) when (lightness(@color) >= 70) {
        color: #333;
    }
    .set-text-color (@color) when (lightness(@color) < 70) {
        color: #fff;
    }

    .setColor(@color) {
        .bg-@{color} {
            background-color: ~"@{@{color}}" !important;
        }
        .border-@{color} {
            border-color: ~"@{@{color}}" !important;
        }
        .btn-@{color} {
            background-color: ~"@{@{color}}";
            color:#fff;
        }
        .btn-@{color}:hover {
            background-color: desaturate(darken(@@color,5%),10%) !important;
            color:#fff;
        }
        .text-@{color} {
            color: ~"@{@{color}}" !important;
        }
        .panel-@{color}{
            border-color: desaturate(darken(@@color,5%),10%) !important;
        }
        .panel-@{color} .panel-heading{
            background-color: ~"@{@{color}}" !important;
            border-color: desaturate(darken(@@color,5%),10%) !important;
            border-radius: 0px;
        }
        .panel-@{color} .panel-heading a,.panel-@{color} .panel-title{
            .set-text-color(@@color);
        }
        .widget.@{color} {
            background-color: ~"@{@{color}}";
            .set-text-color(@@color);
            .widget-header h2{
                .set-text-color(@@color);
            }
        }
    }

##### To define a new color for template...

    @stone-grey: #F57A82;
    .setColor(stone-grey);

The action above will enable you to use this color as widget color, background or text color anywhere, button color, border color or panel color.

##### To use the defined color in widget...

    <div class="widget stone-grey">
    ...
    </div>

## PHP Menu Builder

#### SQL Database

Following example is the exact database copy of the menu which shows up on demo site.

    CREATE TABLE `menu` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `title` varchar(255) NOT NULL,
      `link` varchar(255) NOT NULL,
      `parent` int(11) NOT NULL DEFAULT '0',
      `sort` int(3) NOT NULL DEFAULT '0',
      `icon` varchar(255) NOT NULL,
      PRIMARY KEY (`id`),
      KEY `parent` (`parent`),
      KEY `sort` (`sort`)
    ) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=58 ;

    --
    -- Dumping data for table `menu`
    --

    INSERT INTO `menu` (`id`, `title`, `link`, `parent`, `sort`, `icon`) VALUES
    (1, 'Dashboard', 'index.html', 0, 0, 'icon-home-3'),
    (2, 'UI Elements', '#', 0, 1, 'icon-feather'),
    (3, 'Typography', 'typography.html', 2, 0, ''),
    (5, 'Notifications', 'notifications.html', 2, 0, ''),
    (6, 'Grid', 'grid.html', 2, 0, ''),
    (7, 'Icons', 'icons.html', 2, 0, ''),
    (8, 'Forms', '#', 0, 2, 'icon-pencil-3'),
    (9, 'Tables', '#', 0, 3, 'fa fa-table'),
    (10, 'Maps', '#', 0, 4, 'fa fa-map-marker'),
    (11, 'Email', '#', 0, 5, 'fa fa-envelope'),
    (12, 'Charts', '#', 0, 6, 'icon-chart-line'),
    (14, 'Extras', '#', 0, 8, 'icon-megaphone'),
    (15, 'Modals', 'modals.html', 2, 0, ''),
    (16, 'Portlets', 'portlets.html', 2, 0, ''),
    (17, 'Alerts', 'alerts.html', 2, 0, ''),
    (18, 'Nested List', 'nested-list.html', 2, 0, ''),
    (19, 'Progress Bars', 'progress-bars.html', 2, 0, ''),
    (20, 'Tabs & Accordions', 'tabs-accordions.html', 2, 0, ''),
    (21, 'Buttons', 'buttons.html', 2, 0, ''),
    (22, 'Calendar', 'calendar.html', 2, 0, ''),
    (23, 'Form Elements', 'forms.html', 8, 1, ''),
    (51, 'Advanced Forms', 'advanced-forms.html', 8, 2, ''),
    (25, 'Form Wizard', 'form-wizard.html', 8, 3, ''),
    (26, 'Form Validation', 'form-validation.html', 8, 4, ''),
    (27, 'File Uploads', 'form-uploads.html', 8, 5, ''),
    (28, 'Basic Tables', 'tables.html', 9, 0, ''),
    (29, 'Datatables', 'datatables.html', 9, 1, ''),
    (30, 'Google Maps', 'google-maps.html', 10, 0, ''),
    (31, 'Vector Maps', 'vector-maps.html', 10, 1, ''),
    (32, 'Inbox', 'inbox.html', 11, 0, ''),
    (33, 'View Email', 'read-message.html', 11, 1, ''),
    (34, 'Blank Page', 'blank.html', 14, 0, ''),
    (35, 'Login', 'login.html', 14, 1, ''),
    (36, 'Lock Screen', 'lockscreen.html', 14, 2, ''),
    (37, '404 Error', '404.html', 14, 3, ''),
    (38, 'Gallery', 'gallery.html', 14, 7, ''),
    (39, 'User Profile', 'profile.html', 14, 5, ''),
    (40, 'Invoice', 'invoice.html', 14, 6, ''),
    (41, '500 Error', '500.html', 14, 4, ''),
    (42, 'Maintenance', 'maintenance.html', 14, 8, ''),
    (43, '3 Level menu', '#', 14, 9, ''),
    (44, 'Sub Item', '#', 43, 0, ''),
    (45, '4 Level Menu', '#', 14, 10, ''),
    (46, 'Sub Item - level 3', '#', 45, 0, ''),
    (47, 'Sub Item - level 4', '#', 46, 0, ''),
    (48, 'Submenu with icons', '#', 14, 11, ''),
    (49, 'Item with icon', '#', 48, 0, 'fa fa-camera'),
    (50, 'Another Item', '#', 48, 1, 'entypo entypo-users'),
    (52, 'New Message', 'new-message.html', 11, 2, ''),
    (53, 'Sparkline Charts', 'sparkline-charts.html', 12, 0, ''),
    (54, 'Morris Charts', 'morris-charts.html', 12, 1, ''),
    (55, 'Rickshaw Charts', 'rickshaw-charts.html', 12, 2, ''),
    (56, 'Other Charts', 'other-charts.html', 12, 3, ''),
    (57, 'Register', 'register.html', 14, 1, '');

#### PHP Code

    <?php
    	$config = array();

    	$config['database']['db_host'] = "localhost";
    	$config['database']['db_port'] = "3306";
    	$config['database']['db_user'] = "root";
    	$config['database']['db_pass'] = "";
    	$config['database']['db_name'] = "myapp";

    	function connect_db(){
    		global $config;
    		$db = mysql_connect($config['database']['db_host'].":".$config['database']['db_port'],$config['database']['db_user'],$config['database']['db_pass']) or die("Unable to connect mysql server!");
    		$conn = mysql_select_db($config['database']['db_name']) or die("Database not found in mysql server!");
    		return $conn;
    	}

    	function menu_from_query($query){
    		global $index;

    		$result	=	mysql_query($query);

    		$menu = array(
    			'items' => array(),
    			'parents' => array()
    		);

    		while ($items = mysql_fetch_assoc($result)){
    			$menu['items'][$items['id']] = $items;
    			$menu['parents'][$items['parent']][] = $items['id'];
    			$parent = $items['parent'];
    			while($parent != 0){
    				if($menu['items'][$parent]['parent'] == 0)
    					break;
    				$parent = $menu['items'][$parent]['parent'];
    			}
    			$menu['items'][$items['id']]['top_parent'] = $parent;
    			if($index == $items['link'] && $parent != 0)
    				$menu['items'][$parent]['class'] = "open";
    		}
    		return menu_builder($menu);
    	}

    	function menu_builder($menu, $parent = 0){
    		global $index;
    		$output = "";
    		if (isset($menu['parents'][$parent])){
    			$output .= "";
    			foreach ($menu['parents'][$parent] as $itemId){
    				$active = ($index.".html" == $menu['items'][$itemId]['link'])?" class='active'":null;
    				if(!isset($menu['parents'][$itemId])){
    					$output .= "".(!empty($menu['items'][$itemId]['icon'])?"":null)."".$menu['items'][$itemId]['title']."";
    				}
    				if(isset($menu['parents'][$itemId])){
    					$dropdown = ' ';
    					$output .= "".(!empty($menu['items'][$itemId]['icon'])?"":null)."".$menu['items'][$itemId]['title']."$dropdown";
    					$output .= menu_builder($menu, $itemId);
    					$output .= "";
    				}
    			}
    			$output .= "";
    		}

    		return $output;
    	}
    ?>

After including the code in your script, make sure your page has $index variable setted up in your page and you can display your menu with calling:

    $menu = menu_from_query("SELECT id, title, link, icon, parent FROM menu ORDER BY parent, sort, title");

* Please note that this is not guaranteed to work with your application or your hosting. This is just a sample code that you can use/modify/distribute to build and display your multilevel menu using PHP & MySQL purely.

## PHP Login & Chat

#### Basics

We built a simple PHP user management and autentication script with internal chat application between logged in users. Of course it is just a basic application but with a little PHP knowledge, it can be adapted in your projects.

#### Features

1. Roles
2. Login
3. Role Permissions
4. Add user function
5. Multilingual Support
6. Permission based page protection
7. High security session hijack protection
8. Chat
9. Chat notifications
10. Chat autolinking
11. Fancy chat interface

#### Requirements

- Apache Server
- PHP 5+
- MySQL 5+
- PHP mcrypt extension

#### Installation

Simply you can use the package in the distribution under "chat" folder and complete mysql setup. If you want to use this in your existing template, please use the following steps:

##### 1. Copy "membership" folder and .htaccess file to your template folder

##### 2. Create a database in your mysql database

##### 3. Import database.sql file in your database

##### 4. Edit mysql details in your membership/config.php file

##### 5. Add Following CSS to your template

    #connect .tab-inner .chat_window {
      -o-transform: translate3d(100%,0,0);
      -ms-transform: translate3d(100%,0,0);
      -moz-transform: translate3d(100%,0,0);
      -webkit-transform: translate3d(100%,0,0);
      transform: translate3d(100%,0,0);
      transition: all 0.3s ease 0s;
      top: 0px;
      height: 100%;
      position: absolute;
      left: 0px;
      bottom: 0px;
      width: 100%;
    }
    #connect .tab-inner .chat_window.active {
      -o-transform: translate3d(0%,0,0);
      -ms-transform: translate3d(0%,0,0);
      -moz-transform: translate3d(0%,0,0);
      -webkit-transform: translate3d(0%,0,0);
      transform: translate3d(0%,0,0);
      transition: all 0.3s ease 0s;
    }
    #connect .tab-inner .search-right,
    #connect .tab-inner #collapse {
      -o-transform: translate3d(0%,0,0);
      -ms-transform: translate3d(0%,0,0);
      -moz-transform: translate3d(0%,0,0);
      -webkit-transform: translate3d(0%,0,0);
      transform: translate3d(0%,0,0);
      transition: all 0.3s ease 0s;
    }
    #connect .tab-inner.chat-open .search-right,
    #connect .tab-inner.chat-open #collapse {
      -o-transform: translate3d(-100%,0,0);
      -ms-transform: translate3d(-100%,0,0);
      -moz-transform: translate3d(-100%,0,0);
      -webkit-transform: translate3d(-100%,0,0);
      transform: translate3d(-100%,0,0);
      transition: all 0.3s ease 0s;
    }
    #connect .tab-inner {
      overflow: hidden;
      position: relative;
    }
    .chat_window .chat_header {
      height: 40px;
      background: rgba(255,255,255,0.05);
      position: absolute;
      top: 0px;
      width: 100%;
      left: 0px;
      text-align: center;
      border-bottom: 1px solid rgba(0,0,0,0.07);
    }
    .chat_window .chat_header h3 {
      font-size: 14px;
      color: #fff;
      position: absolute;
      left: 0px;
      top: 0px;
      width: 100%;
      margin-top: 4px;
      margin-bottom: 5px;
    }
    .chat_window .chat_header .btn {
      margin-top: 3px;
      position: relative;
      z-index: 2;
      color: #fff;
    }
    .chat_window .chat_logs {
      top: 40px;
      bottom: 60px;
      width: 100%;
      position: fixed;
    }
    .chat_window .chat_panel {
      position: fixed;
      bottom: 9px;
      height: 50px;
      display: block;
      width: 100%;
    }
    .chat_window .chat_panel {
      background: rgba(0,0,0,0.4);
    }
    .chat_window .chat_panel textarea {
      height: 50px;
      width: 70%;
      font-size: 12px;
      background: none;
      color: #fff;
      padding: 5px;
      border: none;
    }
    .chat_window .chat_panel .chat_send_btn {
      width: 30%;
      height: 50px;
      line-height: 38px;
      vertical-align: top;
    }
    .chat_window .avatar-wrap {
      float: left;
      margin-left: 10px;
      margin-right: 10px;
      position: relative;
      width: 15%;
      max-height: 50px;
    }
    .chat_window .chat_avatar {
      width: 100%;
      max-height: 50px;
    }
    .chat_window .chat_logs .chat_buble {
      padding: 0px !important;
      padding-right: 10px !important;
    }
    .chat_window .chat_logs .chat_buble .inner_bubble {
      background: #eee;
      box-shadow: 0px 1px 1px rgba(255,255,255,0.4);
      padding: 3px 8px 2px;
      font-size: 12px;
      border-radius: 10px;
      color: #666;
      word-wrap: break-word;
      max-width: 150px;
    }
    .chat_window .chat_logs .chat_buble.right .inner_bubble {
      background: #daeffd;
    }
    .chat_window .chat_line {
      margin: 0px;
      padding: 10px 0px;
    }
    .chat-notif {
      color: #fff !important;
    }
    .chat-avatar {
      width: 35px;
    }
    .chat-message {
      color: rgba(255,255,255,0.8);
    }
    .chat-go-btn {
      position: absolute;
      right: 5px;
      top: 20px;
      padding: 3px 6px;
    }

## Widgets

#### Basic Widget Structure

    <div class="widget">
    	<div class="widget-header">
    		<h2>{WIDGET TITLE}</h2>
    		<div class="additional-btn">
    			{WIDGET BUTTONS}
    		</div>
    	</div>
    	<div class="widget-content">
    		{WIDGET CONTENT}
    	</div>
    	<div class="widget-footer">
    		{WIDGET FOOTER}
    	</div>
    </div>

#### Widget with Full Features

    <div class="widget">
    	<div class="widget-header">
    		<h2>{WIDGET TITLE}</h2>
    		<div class="additional-btn">
    			<a href="#" class="hidden reload"><i class="icon-ccw-1"></i></a>
    			<a class="hidden" id="dropdownMenu1" data-toggle="dropdown"><i class="fa fa-cogs"></i></a>
    			<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
    				<li><a href="#">Action</a></li>
    				<li><a href="#">Another action</a></li>
    				<li><a href="#">Something else here</a></li>
    				<li class="divider"></li>
    				<li><a href="#">Separated link</a></li>
    			</ul>
    			<a href="#" class="widget-popout hidden tt" title="Pop Out/In"><i class="icon-publish"></i></a>
    			<a href="#" class="widget-maximize hidden"><i class="icon-resize-full-1"></i></a>
    			<a href="#" class="widget-toggle"><i class="icon-down-open-2"></i></a>
    			<a href="#" class="widget-close"><i class="icon-cancel-3"></i></a>
    		</div>
    	</div>
    	<div class="widget-content">
    	{WIDGET CONTENT}
    	</div>
    	<div class="widget-footer">
    	{WIDGET FOOTER}
    	</div>
    </div>

#### Widget Features

1. Adding color name like darkblue-2 next to widget class will change widgets color.
2. Adding transparent class to widget-header will make header transparent and without border.
3. Adding left-toolbar class to additional-btn inside widget will move the widget buttons to left side.
4. Adding padding class to widget-content will give widget main content section additional padding.

## Usage Tips

#### Simple tips for using template

1. To make left sidebar small by default add "enlarged forced" to #wrapper element
2. To make left sidebar fixed by default add "fixed-left" to body element
3. To make right sidebar open by default add "open-right-sidebar" to #wrapper element
4. To have toolbar on left side of the widget header, you can add a div with "additional-btn left-toolbar" class
5. To make an interface contain movable widgets, you should add "portlets" class to the container item
6. Left sidebar also have spots for widgets. You can write your own or you can simply drag & drop sizable widgets like calendar to left sidebar
7. To use a widget as an application, you need to:
   1. Make sure your widget has popout button.
   2. Make sure your widget is working and all needed libraries are loaded to the page.
   3. Make sure you add the application link on app toolbar using the same structure with the following example:

          <a data-status="active" data-app="todo-app" href="javascript:;"><i class="icon-check"></i>Todo List</a>

   4. data-app should have the same value with the ID of your widget. data-status is active by default which means the widget is visible. To make it hidden by default, make the value data-status="inactive"
8. There are 6 widgets in system that can act as "app" for now. They are Notes, Todo list, Weather, Calendar, Calculator and Realtime Stock Chart. You can make them visible or invisible by default

## Plugins & Credits

#### Used Plugins

Name | URL
--- | ---
jquery-1.11.1 | http://www.jquery.com
Twitter Bootstrap 3.2.0 | http://getbootstrap.com/
jQuery Slimscroll | http://rocha.la/jQuery-slimScroll
Animate.css | http://daneden.me/animate
jQuery Clndr | http://kylestetz.github.io/CLNDR/
Datepicker for Bootstrap | http://www.eyecon.ro/bootstrap-datepicker/
Colorpicker for Bootstrap | http://www.eyecon.ro/bootstrap-colorpicker/
Date Range Picker for Bootstrap | https://github.com/dangrossman/bootstrap-daterangepicker
jQuery Tags Input | http://xoxco.com/clickable/jquery-tags-input
CKEditor | http://ckeditor.com/
Pace | http://github.hubspot.com/pace/docs/welcome/
jQuery Slider | http://jqueryui.com/slider/
jQuery Easy Pie Chart | http://rendro.github.io/easy-pie-chart/
jQuery Sparklines | http://omnipotent.net/jquery.sparkline
Chartjs | http://www.chartjs.org/
Morris | http://www.oesmith.co.uk/morris.js/
iCheck | http://fronteed.com/iCheck/
jQuery Notify.js | http://notifyjs.com/
DataTables | http://www.datatables.net/blog/Twitter_Bootstrap_2
Responsive Table | http://elvery.net/demo/responsive-tables/
jQuery Autonumeric | https://github.com/BobKnothe/autoNumeric
jQuery Animate Numbers | http://aishek.github.io/jquery-animateNumber/
IOS7 Switch | http://mnmly.github.com/ios7-switch/
jQuery Knob | http://anthonyterrien.com/knob/
FullCalendar | http://arshaw.com/fullcalendar/
Gritter Notifications | http://boedesign.com/demos/gritter/
jQuery Validation Plugin | http://jqueryvalidation.org/
Font Awesome 4.0.3 | http://fontawesome.io/
Nestable | https://github.com/dbushell/Nestable
Dropzone | http://www.dropzonejs.com/
Input Mask | http://jasny.github.io/bootstrap/javascript.html#inputmask
Magnific Popup | http://dimsemenov.com/plugins/magnific-popup/
jQuery UI Touch Punch | http://touchpunch.furf.com/
Flot Charts | http://www.flotcharts.org/
jQuery Multi Select | http://loudev.com/
Bootstrap Timepicker | http://jdewit.github.com/bootstrap-timepicker/
Bootstrap Select2 | https://fk.github.io/select2-bootstrap-css/
Bootstrap File Input | http://jasny.github.io/bootstrap/javascript/#fileinput
Bootstrap Summernote | http://hackerwins.github.io/summernote/
Rickshaw Charts | http://code.shutterstock.com/rickshaw/
Jquery Gmap3 | http://gmap3.net/
Jquery Simple Weather | http://simpleweatherjs.com
Jquery Vector Maps | http://jvectormap.com/
Fontello | http://fontello.com/
Bootstrap Xeditable | http://vitalets.github.io/x-editable
Bootstrap Bootbox(4.2.0) | http://bootboxjs.com
Fastclick | https://github.com/ftlabs/fastclick
jQuery BlockUI | http://malsup.com/jquery/block/
Sortable | http://jqueryui.com/sortable/
Nifty Modal | http://tympanus.net/Development/ModalWindowEffects/
jQuery Detect Mobile | http://detectmobilebrowser.com/
User Avatar | http://www.freestockphotos.biz/stockphoto/11860

## Notes

We wish everyone great experience with our template. Please don't forget to purchase extended licence if you are going to use the template on an application which will be used by multiple users/products. As a result of high workload and working on new projects, we can only provide limited support for your requests.

Please feel free to contact us from contact@hubancreative.com if you find a bug or have any projects for your projects.

Huban Creative Team